<template>
  <div id="gongcheng">
    <div class="all-tab">
      <div
        v-for="(item, index) in labels"
        :key="index"
        :class="{active: active === index}"
        @click="handleNavItemClick(index,item)"
      >
        {{ item.bookName }}
      </div>
    </div>
    <div class="step-one">
      <div class="all-title">
        <div class="two-search">
          <div class="search-left">
            <div>项目信息：</div>
            <el-input
              v-model="value"
              clearable
              style="width: 360px"
              placeholder="请输入"
            />
            <div class="all-btn">搜索</div>
          </div>
          <div
            v-if="active === 1"
            class="all-btn right-btn"
            @click="showDialog"
          >
            <el-icon>
              <CirclePlus />
            </el-icon>
            添加项目
          </div>
        </div>
      </div>
      <div class="step-one-content">
        <div
          v-for="item in List"
          :key="item.title"
          class="all-box"
        >
          <div class="one-title">{{ item.title }}</div>
          <div class="one-content">{{ item.content }}</div>
          <div class="one-time">{{ item.time }}</div>
          <div class="one-btns">
            <div v-show="item.type === 1">
              <el-icon>
                <Edit />
              </el-icon>
              修改
            </div>
            <div v-show="item.type === 1">
              <el-icon>
                <Close />
              </el-icon>
              删除
            </div>
            <div v-show="item.type === 2">
              <el-icon>
                <Menu />
              </el-icon>
              展示首页
            </div>
          </div>
          <div class="one-brand">
            <div
              v-show="item.type === 1"
              class="my-brand"
            >我的项目</div>
            <div
              v-show="item.type === 2"
              class="good-brand"
            >精品项目</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      width="630"
      :before-close="handleClose"
    >
      <div class="my-dialog">
        <div class="my-dialog-tab">
          <div class="active">创建项目</div>
          <div>导入gitee/github</div>
        </div>
        <div class="my-dialog-content">
          <div>
            <div class="item-label"><span class="red">*</span>项目名称：</div>
            <div class="item-content">
              <el-input></el-input>
            </div>
          </div>
          <div class="flex-start">
            <div class="item-label"><span class="red">*</span>项目简介：</div>
            <div class="item-content">
              <el-input
                type="textarea"
                rows="6"
              ></el-input>
            </div>
          </div>
          <div>
            <div class="item-label"><span class="red">*</span>链接地址：</div>
            <div class="item-content">
              <el-input></el-input>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="isEdit"
            color="#155EEF"
            @click="editAgent()"
          >
            修改
          </el-button>
          <el-button
            v-else
            color="#155EEF"
            @click="addAgent()"
          >
            确定
          </el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      value: "",
      labels: [
        {
          id: 1,
          bookName: "精品项目",
        },
        {
          id: 3,
          bookName: "我的项目",
        },
      ],
      active: 0,
      List: [
        {
          id: 1,
          title: "周子涵/虚拟现实教育互动平台",
          content:
            "利用Unity引擎与动作捕捉技术，开发了沉浸式VR教学应用，涵盖物理实验、历史场景还原等模块，支持多用户协作与实时交互，旨在通过具象化学习提升学生理解能力。",
          time: "更新3天前",
          //我的课程1，精品课程2
          type: 1,
        },
        {
          id: 2,
          title: "基于深度学习的智能体训练系统",
          content:
            "本项目基于深度学习技术，结合强化学习算法，开发了一套智能体训练系统，能够自动化地训练智能体完成复杂的任务。",
          time: "更新2天前",
          type: 2,
        },
        {
          id: 3,
          title: "基于区块链的数字资产管理系统",
          content:
            "本项目基于区块链技术，开发了一套数字资产管理系统，能够实现用户的资产管理、交易、流转等功能。",
          time: "更新1天前",
          type: 1,
        },
        {
          id: 4,
          title: "基于区块链的智能合约系统",
          content:
            "本项目基于区块链技术，开发了一套智能合约系统，能够实现智能合约的部署、调用、存储等功能。",
          time: "更新2天前",
          type: 2,
        },
        {
          id: 5,
          title: "基于区块链的数字身份系统",
          content:
            "本项目基于区块链技术，开发了一套数字身份系统，能够实现用户的身份认证、绑定、授权等功能。",
          time: "更新1天前",
          type: 1,
        },
        {
          id: 6,
          title: "基于区块链的数字货币系统",
          content:
            "本项目基于区块链技术，开发了一套数字货币系统，能够实现用户的资产管理、交易、流转等功能。",
          time: "更新2天前",
          type: 2,
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleNavItemClick(index, row) {
      this.active = index;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    showDialog() {
      this.dialogVisible = true;
    },
    getList() {
      const data = {
        name: "",
      };
      const url = `/tes/project/list?type=1`;
      this.$axios
        .post(url, data)
        .then((response) => {
          const res = response.data;
          console.log(res, "res");
        })
        .finally(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
#gongcheng {
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .step-one {
    margin-bottom: 20px;
    .all-title {
      position: relative;
      .two-search {
        .search-left {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
          :deep(.el-input__inner) {
            height: 38px;
          }
        }
      }
      .right-btn {
        position: absolute;
        top: 0px;
        right: 0;
      }
    }
    .step-one-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      > div {
        position: relative;
        flex: 0 0 calc((100% - 40px) / 3);
        height: 270px;
        box-sizing: border-box;
        padding: 64px 27px 29px;
        .one-title {
          font-weight: bold;
          font-size: 18px;
          color: #457aff;
          margin-bottom: 20px;
        }
        .one-content {
          font-size: 14px;
          color: #505466;
          line-height: 24px;
        }
        .one-time {
          position: absolute;
          bottom: 29px;
          left: 27px;
          font-size: 14px;
          color: #9b9c9d;
        }
        .one-btns {
          position: absolute;
          top: 17px;
          right: 26px;
          display: flex;
          gap: 20px;
          font-size: 14px;
          color: #457aff;
          > div {
            display: flex;
            align-items: center;
            cursor: pointer;
            i {
              font-size: 18px;
            }
            &:hover {
              color: #505466;
            }
          }
        }
        .one-brand {
          position: absolute;
          top: 9px;
          left: -6px;
          .my-brand {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #ffffff;
            width: 80px;
            height: 22px;
            background: linear-gradient(90deg, #0dbcff, #4c84ff);
            border-radius: 11px;
          }
          .good-brand {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #501414;
            width: 80px;
            height: 22px;
            background: linear-gradient(90deg, #f3c582, #fdeaa5);
            border-radius: 11px;
          }
        }
      }
    }
  }

  .my-dialog {
    .my-dialog-title {
      padding: 0 48px;
      font-size: 20px;
      color: #204077;
      margin-bottom: 35px;
    }
    .my-dialog-tab {
      display: flex;
      justify-content: center;
      gap: 55px;
      > div {
        font-size: 16px;
        color: #6b6a85;
        cursor: pointer;
        &:hover {
          color: #457aff;
        }
        &.active {
          color: #457aff;
          &::after {
            content: "";
            display: block;
            width: 50%;
            height: 2px;
            margin: 17px auto 0;
            background: #3486e4;
          }
        }
      }
    }
    .my-dialog-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px 0 40px;
      > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        &.flex-start {
          align-items: flex-start;
        }
        .item-label {
          width: 100px;
          text-align: right;
          font-size: 16px;
          color: #000000;
          .red {
            color: red;
            margin-right: 4px;
          }
        }
        .item-content {
          :deep(.el-input) {
            width: 400px;
          }
          :deep(.el-textarea) {
            width: 400px;
          }
        }
      }
    }
  }
}
</style>